<template>
  <div class="lpn">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">LPN管理</span>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" @click="tableMultiPrint">多选打印</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
              <el-button size="mini" @click="tablePrint(s.row)">打印</el-button>
          </template>
        </el-table-column>
        <el-form-item label="托盘码" prop="lpn">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_lpn"
                    placeholder="托盘码" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="生成时间" prop="scsj">-->
          <!--<el-date-picker-->
            <!--v-model="autoVue_table_scsj"-->
            <!--type="daterange"-->
            <!--placeholder="选择日期范围">-->
          <!--</el-date-picker>-->
        <!--</el-form-item>-->
      </s-table>
    </el-card>
  </div>
</template>

<script>
  import {AutoVue, GetLodop} from '~/plugins/Tools';

  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], search: true },
      ck_mc: { value: '数据库', rule: [ 'vNull' ], search: true },
      bz: { value: '', rule: [], search: false },
    };
  }
  export default AutoVue({
    name: 'base_lpn-FEcarWms',
    data: {
      table: {
        column: [ { label: '托盘码',
          prop: 'lpn',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '生成时间',
          prop: 'scsj',
          minWidth: '0px',
          cRemarks: '',
          search: true } ],
        url: '/wmsLpn/list',
        key: 'id',
        tableColumn: 2,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      tablePrint (row) {
        this.$confirm('您将打印库位信息。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(() => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印库位信息');
          LODOP.ADD_PRINT_BARCODE(0, 0, 206, 78, '128A', row.lpn);
          LODOP.PREVIEW();
        }).catch(err => {
          console.log(err);
        });
      },
      tableMultiPrint () {
        let startX = 0;
        let startY = 0;
        let width = 206;
        let height = 78;
        let bottom = 10;
        this.$confirm(`您将打印 ${this.table.multipleSelection.length} 个库位信息。`, '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(() => {
          let i = 0;
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印库位信息');
          for (let item of this.table.multipleSelection) {
            LODOP.ADD_PRINT_BARCODE(startX + (bottom + height) * i, startY, width, height, '128A', item.lpn);
            i++;
          }
          LODOP.PREVIEW();
        }).catch(err => {
          console.log(err);
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
